<template>
  <q-page class="row justify-center items-center">
    <div class="col row q-pa-sm">
      <div class="col-1"></div>
      <div class="col">
        <q-card>
          <q-card-section>
            <div class="text-h6">全部私信</div>
          </q-card-section>
          <q-separator />

          <q-card-section>
            <div class="row q-gutter-md">
              <div>
                <ChatUser ref="chatUserRef"></ChatUser>
              </div>
              <div class="col">
                <ChatInfo></ChatInfo>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <q-space />
      </div>
      <div class="col-1"></div>
    </div>

    <SuspensionBtn></SuspensionBtn>
    <UserSelectDig
      @new-chat="
        (u) => {
          newChat(u)
        }
      "
    ></UserSelectDig>
  </q-page>
</template>

<script setup lang="ts">
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import { onMounted, ref } from 'vue'
import ChatUser from './ChatUser.vue'
import ChatInfo from './ChatInfo.vue'
import UserSelectDig from './UserSelectDig.vue'
import type { chatNew } from 'src/service/api/chat'
import type { ApiType } from 'src/service/api'

const chatUserRef = ref<InstanceType<typeof ChatUser>>()
type chatNewType = ApiType<typeof chatNew>['Return']

const newChat = (u: chatNewType) => {
  chatUserRef.value?.addChatUser(u)
}

onMounted(() => {})
</script>

<style scoped></style>
